<template>
  <div class="productionDesign_box myStyle">
    <div id="tags-view-container" class="tags-view-container">
      <div class="tags-view-wrapper">
        <router-link ref="tag" tag="span" class="tags-view-item active" :to="{ path: 'index' }">
          产能统计分析详情
          <span class="el-icon-close" @click="$router.push('/index')" />
        </router-link>
      </div>
    </div>
    <div class="content">
      <div class="content_top content_top_small">
        <StrokeTitle title="产能统计" class="float margin" style="width: 65%">
          <div class="flex_center">
            <ElementRadio :options="RadioOptions" v-model="model" :isButton="true" @change="radioChange" />
          </div>
          <div class="Echarts flex_center">
            <div class="dianLeft flex_center_direction background_181">
              <div class="bottom flex_center">
                <div class="item background flex_center_direction">
                  <div class="number text_shadow">
                    {{ $formatNum("232432") }}
                  </div>
                  <div class="title te_-shadow_danger">上期</div>
                </div>
                <div class="item background flex_center_direction">
                  <div class="number text_shadow">
                    {{ 22}}%
                  </div>
                  <div class="title te_-shadow_danger">上期环比</div>
                </div>
              </div>
            </div>
            <div class="backBor"></div>
            <!-- <PieImg style="width: 64%" itemWidth="0.8" legendType="" legendLeft="39%" cirLeft="0.8" length="12"/> -->
          </div>
        </StrokeTitle>
        <StrokeTitle title="产成品分布" class="float margin" style="width: 33%">
          <div class="flex_center">
            <ElementRadio :options="RadioOptions" v-model="model" :isButton="true" @change="radioChange" />
          </div>
          <div class="Echarts flex_center">
           <PieImg style="width: 100%" itemWidth="0.8" legendType="" legendLeft="45%" length="8"/>
          </div>
        </StrokeTitle>
      </div>
      <div class="content_top">
        <StrokeTitle title="产能分布" class="float margin" style="width: 33%">
          <div class="flex_center">
            <ElementRadio :options="RadioOptions" v-model="model" :isButton="true" @change="radioChange" />
            <ElementSelect ref="psNameSelect" :data="selectList" :isSelected="true" @select="selectList" />
          </div>
          <div class="Echarts flex_center">
            <MyBar width="80%" />
          </div>
        </StrokeTitle>
        <StrokeTitle title="上月环比对比" class="float margin" style="width: 65%">
          <div class="flex_center">
            <ElementRadio :options="RadioOptions" v-model="model" :isButton="true" @change="radioChange" />
            <ElementSelect ref="psNameSelect" :data="selectList" :isSelected="true" @select="selectList" />
          </div>
          <div class="flex_center Echarts">
            <div class="contrasts_box flex_between_direction">
              <div class="contrasts_box_top flex_between">
                <div class="contrasts_box_top_item flex_center">
                  <div class="left_box flex_between_direction">
                    <img src="../../assets/images/echarts/jidi.png" class="jidi" alt="">
                    <div class="title">
                      仰口基地
                    </div>
                  </div>
                  <div class="right_box flex_center_direction">
                    <div class="right_box_top flex_center">
                      555
                      <div class="baifenbi text_shadow">
                        22%
                        <img src="../../assets/images/echarts/sheng.png" alt="">
                      </div>
                    </div>
                    增长产能(标准箱)
                  </div>
                </div>
                <img src="../../assets/images/echarts/zu2.png" alt="" class="lianjie">
                <div class="contrasts_box_top_item flex_center">
                  <div class="left_box flex_between_direction">
                    <img src="../../assets/images/echarts/jidi.png" class="jidi" alt="">
                    <div class="title">
                      仰口基地
                    </div>
                  </div>
                  <div class="right_box flex_center_direction">
                    <div class="right_box_top flex_center">
                      555
                      <div class="baifenbi text_shadow">
                        22%
                        <img src="../../assets/images/echarts/sheng.png" alt="">
                      </div>
                    </div>
                    增长产能(标准箱)
                  </div>
                </div>
                <img src="../../assets/images/echarts/zu2.png" alt="" class="lianjie">
                <div class="contrasts_box_top_item flex_center">
                  <div class="left_box flex_between_direction">
                    <img src="../../assets/images/echarts/jidi.png" class="jidi" alt="">
                    <div class="title">
                      仰口基地
                    </div>
                  </div>
                  <div class="right_box flex_center_direction">
                    <div class="right_box_top flex_center">
                      555
                      <div class="baifenbi text_shadow">
                        22%
                        <img src="../../assets/images/echarts/sheng.png" alt="">
                      </div>
                    </div>
                    增长产能(标准箱)
                  </div>
                </div>
              </div>
              <div class="contrasts_box_bottom flex_between">
                <div class="contrasts_box_bottom_item background" v-for="(item,index) in 5" :key="index">
                  <div class="title flex_center">
                    <div class="radius">
                    </div>
                    仰口基地
                  </div>
                  <div class="baifenbi text_shadow">
                    22%
                    <img src="../../assets/images/echarts/sheng.png" alt="">
                  </div>
                  <div class="number_box">
                    <div class="number text_shadow">333</div>
                    <div class="alt">(标准箱)</div>
                  </div>
                </div>
              </div>
            </div>
            <!-- <Rank /> -->
          </div>
        </StrokeTitle>
      </div>
      <div class="content_top">
        <StrokeTitle title="近三十日产能趋势" class="float margin" style="width: 99%">
          <div class="flex_center">
            <ElementSelect ref="psNameSelect" :data="selectList" :isSelected="true" @select="selectList" />
          </div>
          <MoreDirection :data="data3" :legendData="['已完成']" barWidth="24" style="height: calc(100% - 50px)" />
        </StrokeTitle>
      </div>
    </div>
  </div>
</template>

<script>
import MyBar from "@/components/echarts/bar/myBar.vue";
export default {
  components: {
    MyBar,
  },
  data() {
    return {
      model: "month",
      RadioOptions: [
        {
          value: "month",
          label: "当月",
        },
        {
          value: "year",
          label: "当季",
        },
        {
          value: "zi",
          label: "自定义",
        },
      ],
      selectList: [
        { value: "", label: "全部" },
        { value: "1", label: "选项一" },
      ],
      data3: [
        { name: "已签收", value1: 33 },
        { name: "配送中", value1: 53 },
        { name: "已出库", value1: 78 },
        { name: "采购中", value1: 12 },
        { name: "接单中", value1: 90 },
      ],
    };
  },
  methods: {
    radioChange() {},
  },
};
</script>


<style lang="scss" scoped>
.productionDesign_box {
  .content {
    .content_top {
      // background: red;
      width: 100%;
      height: 32%;
    }
    .content_top_small {
      height: 28.8%;
    }
    .Echarts {
      height: calc(100% - 50px);
      position: relative;
      .backBor {
        background: url("../../assets/images/echarts/11.png");
        background-size: 100% 100%;
        position: absolute;
        // right: 0;
        left: 36%;
        width: 1px;
        height: 80%;
        top: 10%;
      }
      .dianLeft {
        width: 25%;
        margin: 0 5%;
        height: 70%;
        max-height: 110px;
        padding: 15px 9px;
        justify-content: space-between;
        .bottom {
          width: 100%;
          height: 100%;
          justify-content: space-between;
          .item {
            height: 100%;
            width: 49%;
            .number {
              font-size: 25px;
              font-family: SimHei, SimHei-Regular;
              font-weight: 400;
              // text-align: center;
            }
            .title {
              font-size: 12px;
              font-family: Source Han Sans CN, Source Han Sans CN-Normal;
              font-weight: Normal;
              // text-align: center;
              color: #c1f0fe;
            }
          }
        }
      }
      .contrasts_box {
        width: 90%;
        height: 100%;
        max-height: 180px;
        .contrasts_box_top {
          width: 100%;
          height: 49%;
          // background: red;
          .contrasts_box_top_item {
            width: 26%;
            // height: 80px;
            height: 100%;
            background: linear-gradient(
              180deg,
              rgba(44, 119, 187, 0.8) 0%,
              rgba(18, 81, 141, 0.8) 100%
            );
            border: 1px solid #3486da;
            .left_box {
              width: 30%;
              height: 100%;
              // padding:4% 0 0 0;

              justify-content: center;
              .jidi {
                width: 50%;
              }
              .title {
                padding: 7% 8%;
                font-size: 14px;
                color: #ffffff;
              }
              border-bottom: 2px solid #23c3ff;
            }
            .right_box {
              width: 54%;
              background-size: 100% 100%;
              height: 86%;
              font-size: 14px;
              color: #ffffff;
              background: url("../../assets/images/echarts/tupiandiwen.png");
              .right_box_top {
                width: 100%;
                height: 50%;
                font-size: 28px;
                text-align: left;
                .baifenbi {
                  font-size: 14px;
                  margin-left: 15px;
                  position: relative;
                  top: -7px;
                  img {
                    width: 13px;
                    margin-left: -5px;
                    margin-top: 5px;
                  }
                }
              }
            }
          }
        }
        .contrasts_box_bottom {
          width: 100%;
          height: 49%;
          margin-top: 1%;
          // background: red;
          .contrasts_box_bottom_item {
            height: 100%;
            width: 18.5%;
            font-size: 14px;
            color: #ffffff;
            .title {
              justify-content: flex-start;
              margin-top: 2%;
              height: 33%;
              .radius {
                border-radius: 50%;
                width: 6px;
                height: 6px;
                background: #23c3ff;
                margin: 0 10px 0 15px;
              }
            }
            .baifenbi {
              margin-left: 30px;
              height: 20%;
            }
            .number_box {
              height: 33%;
              width: 100%;

              display: flex;
              align-items: center;
              .number {
                font-size: 28px;
                margin-left: 40%;
              }
              .alt {
                margin-left: 2px;
              }
            }
          }
        }

        // background: red;
      }
    }
  }
}
</style>